<template>
  <div>
	<el-card class="box-card card-toubu" shadow="never">
	  <div class="text item">
		<i class="el-icon-star-off"></i>&nbsp;
		<span>按钮操作</span>
		<br />
		<br />
		<el-button
		  type="primary"
		  @click="
			dialogFormVisible = true;
			addOrUpdate = '添加';
		  "
		  >添加</el-button
		>
		<el-button type="primary" @click="returnQuery()">返回上级</el-button>
	  </div>
	</el-card>
	<el-card class="box-card card-toubu" shadow="never">
	  <div class="text item">
	    <i class="el-icon-tickets"></i>&nbsp;
	    <span>数据列表</span>
	  </div>
	</el-card>
    <!-- 表格区域 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="编号" width="80" prop="id"></el-table-column>
      <el-table-column
        label="分类名称"
        width="180"
        prop="name"
      ></el-table-column>
      <el-table-column
        label="级别"
        width="150"
        prop="parent_id"
      ></el-table-column>
      <el-table-column
        label="商品数量"
        width="150"
        prop="goods_num"
      ></el-table-column>
      <el-table-column label="导航栏" width="150" prop="is_menu">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isMenu"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="1"
            inactive-value="0"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="是否显示" width="150" prop="is_show">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isShow"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="1"
            inactive-value="0"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="排序" width="150" prop="seq"></el-table-column>
      <el-table-column label="设置" width="350">
        <template slot-scope="scope">
          <el-button type="warning" size="mini" @click="addCategory(scope.row)"
            >新增下级</el-button
          >
          <el-button
            type="warning"
            size="mini"
            @click="showCategory(scope.row.id)"
            >查看下级</el-button
          >
          <el-button
            type="warning"
            size="mini"
            @click="editCategory(scope.row)"
            >转移商品</el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="
              handleEdit(scope.row.id);
              addOrUpdate = '编辑';
            "
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页控件 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <!-- dialog对话框控件 -->
    <el-dialog
      :title="addOrUpdate + '分类'"
      :visible.sync="dialogFormVisible"
      @close="queryCategory = {}"
    >
      <el-form :model="queryCategory">
        <el-form-item label="分类名称" :label-width="formLabelWidth">
          <el-input v-model="queryCategory.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="排序" :label-width="formLabelWidth">
          <el-input v-model="queryCategory.seq" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否导航" :label-width="formLabelWidth">
          <el-switch
            v-model="queryCategory.isMenu"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="是否显示" :label-width="formLabelWidth">
          <el-switch
            v-model="queryCategory.isShow"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="所属模板" :label-width="formLabelWidth">
          <el-select v-model="queryCategory.template_id" placeholder="请选择">
            <el-option
              v-for="template in templates"
              :key="template.id"
              :label="template.name"
              :value="template.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handelAddOrUpdate">确 定</el-button>
      </div>
    </el-dialog>
	<!-- 转移商品对话框 -->
	        <el-dialog
	          title="转移商品"
	          :visible.sync="goodsDialogVisible"
	          width="50%">
	          <span>
	            <el-form label-position="right" label-width="80px" v-model="categoryInfo">
	              <span>原商品分类:</span>
	              <el-select v-model="templateId" style="margin-left: 20px;" disabled placeholder="请选择">
	                <el-option
	                  v-for="item in templates"
	                  :key="item.id"
	                  :label="item.name"
	                  :value="item.id">
	                </el-option>
	              </el-select>
	              <span style="margin-left: 20px;">目标商品分类:</span>
	              <el-select v-model="categoryInfo.templateId" style="margin-left: 20px;" placeholder="请选择">
	                <el-option
	                  v-for="item in templates"
	                  :key="item.id"
	                  :label="item.name"
	                  :value="item.id">
	                </el-option>
	              </el-select>
	            </el-form>
	          </span>
	          <span slot="footer" class="dialog-footer">
	            <el-button @click="goodsDialogVisible = false">取 消</el-button>
	            <el-button type="primary" @click="determine">确 定</el-button>
	          </span>
	        </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 数据接收数组
      tableData: [],
      // 总行数
      total: 0,
      // 选择显示每页多少数据数组
      pageSizes: [10, 20, 30, 40],
      // 页号
      currentPage: 1,
      // 页大小
      pageSize: 10,
      // 查询表单数据
      categoryParent: 0,
      // 对话框展示，默认不展示
      dialogFormVisible: false,
      // 判断对话框是添加还是修改
      addOrUpdate: "",
      // dialog对话框输入框长度
      formLabelWidth: "120px",
      // dialog对话框数据
      queryCategory: {},
      // 所有模板对象
      templates: [],
      // 用于记录点击的上级Id
      parentIds: [],
	  // 封装新增或修改信息
	  categoryInfo: {},
	  // 显示转移对话框
	  goodsDialogVisible: false,
	  // 转移商品的模板id
	  templateId: 0
    };
  },
  methods: {
	// 打开转移商品对话框
	editCategory (row) {
	  this.templateId = row.templateId
	  this.categoryInfo = row
	  this.goodsDialogVisible = true
	},
    // 获取数据的方法
    async getCategory() {
      const { data: res } = await this.$http.get(
        `vi/goods/category/getCategoryByParentId/${this.categoryParent}/${this.currentPage}/${this.pageSize}`
      );
      this.tableData = res.data.page.rows;
      this.total = res.data.page.total;
    },
    // 通过Id查询品牌方法
    async handleEdit(id) {
      const { data: res } = await this.$http.get(
        `vi/goods/category/detail/${id}`
      );
      this.queryCategory = res.data.tbCategory;
      this.dialogFormVisible = true;
    },
    // 通过Id删除模板方法
    handleDelete(id) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http.delete(`vi/goods/category/delete/${id}`);
          this.$message.success("删除成功！");
          // 刷新页面
          this.getCategory();
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    // 页大小改变方法
    handleSizeChange(val) {
      this.pageSize = val;
      this.getCategory();
    },
    // 页号改变方法
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getCategory();
    },
    // 添加或修改模板方法
    async handelAddOrUpdate() {
      // this.queryCategory.parent_id = this.categoryParent
	  if (this.queryCategory.id){
		const { data: res } = await this.$http.put(`vi/goods/category/update`, this.queryCategory)
		this.$message.success(res.message)
	  } else {
		const { data: res } = await this.$http.post(`vi/goods/category/add`, this.queryCategory)
		this.$message.success(res.message)
	  }
      this.dialogFormVisible = false
      this.getCategory()
    },
    // 查看下级方法
    showCategory(id) {
      if (this.parentIds.length < 2) {
        this.parentIds.push(this.categoryParent);
        this.categoryParent = id;
        this.getCategory();
      } else {
        this.$message.info("这已经是最后一级了");
      }
    },
    // 查询所有模板对象
    async getTemplate() {
      const { data: res } = await this.$http.get("vi/goods/template/list");
      this.templates = res.data.list;
    },
    // 新增下级分类
    addCategory(row) {
      this.dialogFormVisible = true;
      this.addOrUpdate = "添加下级";
      this.queryCategory.parent_id = row.id;
      this.queryCategory.template_id = row.template_id;
    },
    // 返回上一级方法
    returnQuery() {
      if (this.parentIds.length > 0) {
        this.categoryParent = this.parentIds[this.parentIds.length - 1];
        this.parentIds.splice(this.parentIds.length - 1, 1);
        this.getCategory();
      } else {
        this.$message.info("这已经是第一级了");
      }
    },
	// 转移商品
	async determine () {
		if (this.categoryInfo.id == null) {
			const { data: res } = await this.$http.post('vi/goods/category/add', this.categoryInfo)
			this.$message.success(res.message)
		}else {
		    const { data: res } = await this.$http.put('vi/goods/category/update', this.categoryInfo)
			this.$message.success(res.message)
		}
		this.dialogVisible = false
		this.goodsDialogVisible = false
		this.getCategory()
	  }
  },
  created() {
    this.getCategory();
    this.getTemplate();
  }
};
</script>

<style></style>
